<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>分类管理</title>
    <link rel="stylesheet" href="../css/admin_yuyue.css" />
    <link rel="stylesheet" href="../css/admin_nav.css" />
    <link rel="stylesheet" href="../css/servlet_class.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 你可以删除此行来避免使用 jQuery -->
</head>
<body>
<jsp:include page="admin.jsp" />
<div class="content">
    <jsp:include page="admin_nav.jsp" />

    <div class="main">
        <form action="#" method="post">
            <div class="servlet_on">
                <input class="search" type="text" placeholder="请输入搜索内容" name="btn0"/>
                <input id="searchbtn" type="button" value="搜索" name="search" >
                <input class="btn1" type="button" value="新增" name="btn1"/>
                <input class="btn2" type="button" value="批量删除" name="btn2"/>
            </div>
            <br />
            <div class="servlet_down">
                <table>
                    <thead>
                    <tr>
                        <th>
                            <input type="checkbox"/>&nbsp;&nbsp;分类名称
                        </th>
                        <th class="right">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody id="categoryTableBody">
                    <!-- 分类数据将通过 AJAX 填充在这里 -->
                    </tbody>
                </table>
            </div>
        </form>
    </div>
</div>

<div class="overlay" style="display: none">
    <form action="../ServiceClassAddServlet" method="post">
        <div class="new_add">
            <p>新增</p>
            <hr />
            <br />
            <p>
                <label>
                    <span>*</span>分类名称：
                    <input class="classname" name="classname" type="text" placeholder="请输入"/>
                </label>
            </p>
            <br />
            <hr />
            <div class="end">
                <input class="cancel" type="button" value="取消" name="cancel"/>
                <input class="btn3" type="submit" value="确认" name="enter"/>
            </div>
        </div>
    </form>
</div>

<script>
    // 加载分类数据
    function loadCategories() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '../ServiceClassListServlet', true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                console.log("返回的分类数据：", response);

                // 判断返回结果是否为数组（表示有数据）
                if (Array.isArray(response)) {
                    var tableBody = document.getElementById('categoryTableBody');
                    // 清空表格
                    tableBody.innerHTML = '';

                    if (response.length > 0) {
                        response.forEach(function (category) {
                            // 创建表格行
                            var row = document.createElement('tr');

                            var td1 = document.createElement('td');
                            var checkbox = document.createElement('input');
                            checkbox.type = 'checkbox';
                            checkbox.name = 'categoryId';
                            checkbox.value = category.serviceclass_id;
                            td1.appendChild(checkbox);
                            td1.appendChild(document.createTextNode(category.serviceclass_name || '无'));
                            row.appendChild(td1);

                            var td2 = document.createElement('td');
                            td2.className = 'right';
                            var editLink = document.createElement('a');
                            editLink.href = 'EditCategoryServlet?id=' + category.serviceclass_id;
                            editLink.textContent = '编辑';
                            td2.appendChild(editLink);
                            var deleteLink = document.createElement('a');
                            deleteLink.href = 'DeleteCategoryServlet?id=' + category.serviceclass_id;
                            deleteLink.textContent = '删除';
                            deleteLink.onclick = function() {
                                return confirm('确定删除吗？');
                            };
                            td2.appendChild(deleteLink);
                            row.appendChild(td2);

                            tableBody.appendChild(row);
                        });
                    } else {
                        // 如果没有分类数据，显示提示
                        var row = document.createElement('tr');
                        var cell = document.createElement('td');
                        cell.colSpan = 2;
                        cell.textContent = '没有数据';
                        row.appendChild(cell);
                        tableBody.appendChild(row);
                    }
                } else {
                    alert("数据加载失败，请稍后再试！");
                }
            } else if (xhr.readyState === 4) {
                // 请求失败
                alert("请求出错，请稍后再试！");
            }
        };
        xhr.send();
    }

    // 页面加载时，自动调用 loadCategories 函数获取分类数据
    window.onload = function() {
        loadCategories();

        // 显示新增分类的弹出框
        document.querySelector(".btn1").addEventListener('click', function () {
            document.querySelector(".new_add").style.display = 'block';
            document.querySelector(".overlay").style.display = 'block';
        });

        // 取消新增分类的操作
        document.querySelector(".cancel").addEventListener('click', function () {
            document.querySelector(".new_add").style.display = 'none';
            document.querySelector(".overlay").style.display = 'none';
        });
    };
</script>

</body>
</html>
